<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>从左到右，从右到左</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
    <script>
        $(function () {
            $("#btn1").click(function () {
                $("option").each(function () {
                    if(this.selected==true) $(this).appendTo($("select:last"));
                    this.selected=false;
                });
            })
            $("#btn2").click(function () {
                $("option").appendTo($("select:last"));
            })
            $("#btn3").click(function () {
                $("option").each(function () {
                    if(this.selected==true) $(this).appendTo($("select:first"));
                    this.selected=false;
                });
            })
            $("#btn4").click(function () {
                $("option").appendTo($("select:first"));
            })
        })
    </script>
</head>
<body>
        <span>
            <select multiple="multiple" size="8" style="border: pink solid 1px">
                <option selected="selected">选择项1</option>
                <option>选择项2</option>
                <option>选择项3</option>
                <option>选择项4</option>
                <option>选择项5</option>
                <option>选择项6</option>
                <option>选择项7</option>
                <option selected="selected">选择项8</option>
            </select>
            <button id="btn1">选种添加到右边</button>
            <button id="btn2">全部添加到右边</button>
        <span/>
        <span>
            <select multiple="multiple" size="8" style="border: pink solid 1px">

            </select>
            <button id="btn3">选种添加到左边</button>
            <button id="btn4">全部添加到左边</button>
        </span>
</body>
</html>